03. Stack Navigator

Stack Navigator v1

When pressing an item in, say, an index view, we expect to go to a new screen with details on that item. React Navigation offers another navigator to do just that! With Stack Navigator, new screens are added and removed as a stack. This places screens on top of one another in a "last in, first out" manner, similar to Array's push() and pop() methods.

StackNavigator's usage is largely similar to that of TabNavigator. But rather than passing in an object of different tabs, we pass in an object of the different screens that should be available in that stack.

Stack Navigator v2

StackNavigator has been deprecated in favor of createStackNavigator, which is functionally identical but clearly communicates that it's a function that returns a component.

According to the documentation, the new StackNavigator is “less pushy”:

Each time you call push we add a new route to the navigation stack. When you call navigate, it first tries to find an existing route with that name, and only pushes a new route if there isn't yet one on the stack.

Let's suppose that we actually want to add another details screen. This is pretty common in cases where you pass in some unique data to each route (more on that later when we talk about params!). To do this, we can change navigate to push. This allows us to express the intent to add another route regardless of the existing navigation history.

Let's see how we'd use the Stack Navigator from React Navigation v2.

First, go ahead an import createStackNavigator from react-navigation.

import { createStackNavigator } from 'react-navigation';

Say we have two basic components, Home and Dashboard:

const Home = ({ navigation }) => (
  <View>
    <Text>This is the Home view</Text>
    <TouchableOpacity onPress={() => navigation.navigate('Dashboard')}>
      <Text>Press here for the Dashboard</Text>
    </TouchableOpacity>
  </View>
);

const Dashboard = () => (
  <View>
    <Text>This is the Dashboard</Text>
  </View>
);

Note that a navigation prop is passed to the stateless functional Home component, which allows navigation to another route. Once this is done, we can pass an object into createStackNavigator similar to how we did for createBottomTabNavigator:

const Stack = createStackNavigator({
  Home: {
    screen: Home
  },
  Dashboard: {
    screen: Dashboard
  }
})

The return value of passing an object into createStackNavigator is a component as well, and we can render it as such!

// App.js

// ...

export default class App extends React.Component {
  render() {
    return (
      <Stack />
    );
  }
}

Stack Navigator and Tab Navigator often go hand-in-hand. Since they each return components, you'll often see one nested within the other. Let's see this in action as we implement this into UdaciFitness!

Here's the commit with the changes made in this video.

Here's the commit with the changes made in this video.

Here's the commit with the changes made in this video.

Here's the commit with the changes made in this video.

Here's the commit with the changes made in this video.

Summary

React Navigation's Stack Navigator is another customizable navigation option based on adding and removing new screens to a stack. Its API is similar to that of the Tab Navigator; it takes in an object that defines all screens, then returns a component. Since both the Stack Navigator and the Tab Navigator both return components, a common practice is to nest these navigators within one another.

In the next section, we'll take a look at the Drawer Navigator, in which screens are switched from a drawer that pops out from the side of the screen!

Further Research

• Stack Navigation in React Native
• StackNavigator v1 from the React Navigator docs
• StackNavigator v2 from the React Navigator docs